<script setup>
import {onMounted, ref, onUnmounted} from 'vue';
import request from "@/utils/request";
import {useShipStore} from '@/stores/ship';

import * as echarts from 'echarts';
import englishToChinese from '@/json/post';
import englishToChinese2 from '@/json/department';


//右上角时间
var t = null;
t = setTimeout(time, 1000);//开始运行
function time() {
  clearTimeout(t);//清除定时器
  let dt;
  dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours();//获取时
  var m = dt.getMinutes();//获取分
  var s = dt.getSeconds();//获取秒
  document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
  t = setTimeout(time, 1000); //设定定时器，循环运行
}


// 我们这里可以直接结构出想要的数据，但是数据会出现无法实现响应式问题，官方使用的API reactive 使state数据生成响应式。 对于这种情况我们可以这样做
const shipStore = useShipStore();
// const { shipStore } = storeToRefs(useShipStore());

const translateJsonText = (jsonObject, translate) => {
  var tmpArray = []
  Object.keys(jsonObject).forEach(function (key) {
    var obj = {
      name: translate[key] || key,
      value: jsonObject[key]
    }
    tmpArray.push(obj)
  })
  // console.log(tmpArray)
  return tmpArray
}

const getAxis = () => {

}

var myChart1;
const initEcharts01 = async () => {
  if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
    myChart1.dispose();
    console.log(" chart instance dispose ");
  }
  myChart1 = echarts.init(document.getElementById('eBox1'));
  var staff_info_json = await request.get("/staff_info/query_ship_id?ship_id=" + shipStore.ship_id);
  var option = {
    title: {
      show: true,
      text: "该船舶各岗位人数占比",
      textStyle: {
        color: "#0EFCFF",
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
      },
      right: "2%",
      bottom: "3%"
    },
    tooltip: {
      trigger: 'item'
    },
    color: ["#2a99c9", "#afe8ff", "#37dbbe", "#a9e8dc", "#06b8a2"],
    legend: {
      top: '1%',
      left: '5%',
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: '船舶配员信息各岗位人数',
        type: 'pie',
        radius: ['20%', '68%'],
        center: ['68%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        data: translateJsonText(staff_info_json, englishToChinese)
      }
    ]
  };

  option && myChart1.setOption(option);

}

var myChart2;
const initEcharts02 = async () => {
  if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
    myChart2.dispose();
  }
  myChart2 = echarts.init(document.getElementById('eBox2'));

  var department_info_json = await request.get("/staff_info/query_ship_id/department?ship_id=" + shipStore.ship_id);
  var option = {
    title: {
      show: true,
      text: "该船舶各部门人数占比",
      textStyle: {
        color: "#0EFCFF",
        fontStyle: 'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
        fontWeight: 'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
        fontFamily: 'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New' 
      },
      right: "2%",
      bottom: "3%"
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '20%',
      left: '15%',
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
    },
    color: ["#2a99c9", "#afe8ff", "#37dbbe", "#a9e8dc", "#06b8a2"],
    label: {
      show: false,
      position: 'center'
    },
    series: [
      {
        name: '船舶配员信息（甲板部、轮机部、客运部）',
        type: 'pie',
        radius: ['20%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        data: translateJsonText(department_info_json, englishToChinese2)
      }
    ]
  };

  option && myChart2.setOption(option);

}


const DataProduce01 = (jsonObject, translate) => {
  var tmpArray = []
  var names = []
  var values = []
  Object.keys(jsonObject).forEach(function (key) {
    names.push(translate[key] || key)
    values.push(jsonObject[key])
  })
  tmpArray.push(names)
  tmpArray.push(values)
  // console.log(tmpArray)
  return tmpArray
}

// 甲板部一般船舶最低安全配员标准
var myChart3;
const initEcharts03 = async () => {
  if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
    myChart3.dispose();
  }
  var chartDom = document.getElementById('container_chart01');
  myChart3 = echarts.init(chartDom);

  var jsonObject = await request.get("/deck/query_standard?tonnage=" + shipStore.tonnage + "&ship_type=一般轮船");
  var jsonObject2 = await request.get('/staff_info/deck?ship_id=' + shipStore.ship_id)

  // console.log(DataProduce01(jsonObject,englishToChinese));
  // console.log(DataProduce01(jsonObject2,englishToChinese));
  myChart3.setOption(
      {
        title: {text: ""},
        xAxis: {
          type: 'category',
          data: DataProduce01(jsonObject, englishToChinese)[0],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: "#ccc"
          },
          left: "5%"
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: shipStore.ship_name,
            data: DataProduce01(jsonObject, englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
          {
            name: "甲板部最低安全配员标准",
            data: DataProduce01(jsonObject2, englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#a8c0ff'},
                {offset: 0.7, color: '#4e54c8'},
                {offset: 1, color: '#3f2b96'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          }
        ]
      }
  );
}

// 甲板部拖船最低安全配员标准(区别海上和港内)
var myChart4;
const initEcharts04 = async () => {
  if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
    myChart4.dispose();
  }
  var chartDom = document.getElementById('container_chart02');
  myChart4 = echarts.init(chartDom);

  var jsonObject = await request.get("/engineer/standard?total_power=" + shipStore.total_power);
  var jsonObject2 = await request.get('/staff_info/engineer?ship_id=' + shipStore.ship_id)

  myChart4.setOption(
      {
        title: {text: ""},
        xAxis: {
          type: 'category',
          data: DataProduce01(jsonObject, englishToChinese)[0],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: "#ccc"
          },
          left: "5%"
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: shipStore.ship_name,
            data: DataProduce01(jsonObject, englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
          {
            name: "轮机部最低安全配员标准",
            data: DataProduce01(jsonObject2, englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#a8c0ff'},
                {offset: 0.7, color: '#4e54c8'},
                {offset: 1, color: '#3f2b96'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          }
        ]
      }
  );
}

// 轮机部海上航区最低安全配员标准
var myChart5;
const initEcharts05 = async () => {
  if (myChart5 != null && myChart5 != "" && myChart5 != undefined) {
    myChart5.dispose();
  }
  myChart5 = echarts.init(document.getElementById('container_chart03'));
  var jsonObject = await request.get("/engineer/standard?total_power=" + shipStore.total_power);
  myChart5.setOption(
      {
        xAxis: {
          type: 'category',
          data: DataProduce01(jsonObject, englishToChinese)[0],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            data: DataProduce01(jsonObject, englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          }
        ]
      }
  );
}


onMounted(async () => {
  await initEcharts01();
  await initEcharts02();
  await initEcharts03();
  await initEcharts04();
  // await initEcharts05();
})


onUnmounted(() => {
  myChart1.dispose();
  myChart2.dispose();
  myChart3.dispose();
  myChart4.dispose();
  // myChart5.dispose();
  // console.log( "myChart1卸载完成" );
})

</script>


<template>
  <div class="app-container">

    <div class="head">
      <h1>船舶配员数据可视化</h1>
      <div class="weather">
        <!--<img src="images/weather.png"><span>多云转小雨</span>-->
        <span id="showTime"></span>
      </div>
    </div>

    <div class="container-main">

      <div class="main-a">

        <div class="a-left">
          <!-- <img class="chart-border" src="../assets/images/main_top_bottom.png" /> -->
          <div id="eBox1"></div>
        </div>

        <div class="a-right">
          <!-- <img class="chart-border" src="../assets/images/main_top_bottom.png" /> -->
          <div id="eBox2"></div>
        </div>

      </div>

      <div class="main-b">
        <div class="main_middle_list">
          <img class="main_list_background" src="../assets/images/main_middle.png" alt="">
          <div class="main_list_title">船名</div>
          <span class="main_list_title_num">{{ shipStore.ship_name }}</span>
        </div>
        <div class="main_middle_list">
          <img class="main_list_background" src="../assets/images/main_middle.png" alt="">
          <div class="main_list_title">船舶识别号</div>
          <span class="main_list_title_num">{{ shipStore.ship_id }}</span>
        </div>
        <div class="main_middle_list">
          <img class="main_list_background" src="../assets/images/main_middle.png" alt="">
          <div class="main_list_title">船舶类型</div>
          <span class="main_list_title_num">{{ shipStore.ship_type }}</span>
        </div>
        <div class="main_middle_list">
          <img class="main_list_background" src="../assets/images/main_middle.png" alt="">
          <div class="main_list_title">吨位</div>
          <span class="main_list_title_num">{{ shipStore.tonnage }}</span>
        </div>
        <div class="main_middle_list">
          <img class="main_list_background" src="../assets/images/main_middle.png" alt="">
          <div class="main_list_title">总机功率（千瓦）</div>
          <span class="main_list_title_num">{{ shipStore.total_power }}</span>
        </div>

      </div>

      <div class="main-c">
        <div class="c-list">
          <!-- <img class="c-background" src="../assets/images/main_bootm_middle.png" alt=""> -->
          <div class="c-list-title">对比该船舶甲板部配员与最低安全配员标准</div>
          <div id="container_chart01" class="main-con"></div>
        </div>

        <div class="c-list">
          <!-- <img class="c-background" src="../assets/images/main_bootm_middle.png" alt=""> -->
          <div class="c-list-title">对比该船舶轮机部配员与最低安全配员标准</div>
          <div id="container_chart02" class="main-con"></div>
        </div>

        <!--        <div class="c-list">-->
        <!--          &lt;!&ndash; <img class="c-background" src="../assets/images/main_bootm_middle.png" alt=""> &ndash;&gt;-->
        <!--          <div class="c-list-title">对比该船舶轮机部配员与最低安全配员标准</div>-->
        <!--          <div id="container_chart03" class="main-con"></div>-->
        <!--        </div>-->

      </div>
    </div>

  </div>
</template>

<style lang="scss" scope>
.app-container {
  height: 100%;
  width: 100%;
  background: url(../assets/images/bg.png) no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: hidden;


  .head {
    width: 100%;
    height: 8%;
    background: url(../assets/images/head_bg.png) no-repeat center center;
    background-size: cover;
    position: relative;

    h1 {
      color: #fff;
      text-align: center;
      font-size: 2rem;
      line-height: 3rem;
      font-weight: bold
    }

    img {
      width: 1.5rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: .2rem
    }

    .weather {
      position: absolute;
      right: .3rem;
      top: .9rem;
      line-height: .90rem;

      img {
        width: .37rem;
        display: inline-block;
        vertical-align: middle;
      }

      span {
        color: rgba(255, 255, 255, .7);
        font-size: 1.1rem;
        padding-right: 3rem;
      }
    }

  }

  .container-main {
    width: 100%;
    height: 92%;

    .main-a {
      width: 100%;
      height: 44%;
      display: flex;
      flex-direction: row;
      margin-bottom: 0.8%;


      .a-left {
        height: 100%;
        width: 48%;
        margin: 0px 1%;


        // .chart-border {
        //   position: relative;
        //   width: 100%;
        //   height: 100%;
        //   vertical-align: top;
        //   z-index: 1;
        // }

        #eBox1 {
          height: 100%;
          width: 100%;
          position: relative;
          background: url(../assets/images/main_top_bottom.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      .a-right {
        height: 100%;
        width: 48%;
        margin: 0px 1%;

        #eBox2 {
          height: 100%;
          width: 100%;
          position: relative;
          background: url(../assets/images/main_top_bottom.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }


    .main-b {
      width: 100%;
      height: 10%;


      .main_middle_list {
        position: relative;
        float: left;
        width: 18.5%;
        height: 100%;
        background: rgba(11, 76, 151, 0.10);
        box-shadow: 1px 2px 10px 1px rgba(14, 252, 255, 0.53), inset 5px 4px 100px 1px rgba(14, 252, 255, 0.34);
        margin-left: 1.25%;

        .main_list_background {
          position: absolute;
          width: 100%;
          height: 100%;
          border: 0 none;
          vertical-align: top;

        }

        .main_list_title {
          font-size: .75vw;
          color: #0EFCFF;
          text-indent: .8vw;
          padding-top: .5vw;
        }

        .main_list_title_num {
          display: inline-block;
          width: 100%;
          font-size: 1.4vw;
          font-weight: bold;
          color: white;
          text-align: center;
          letter-spacing: .2vw;
          margin-top: 1.5%;
        }

      }
    }

    .main-c {
      width: 100%;
      height: 42%;
      display: flex;
      flex-direction: row;
      margin: 1% 0;

      .c-list {
        margin-left: 1.5%;
        display: flex;
        flex-direction: column;
        background: url(../assets/images/main_bootm_middle.png) no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 48%;

        .c-background {
          position: relative;
          width: 100%;
          height: 100%;
          border: 0 none;
          vertical-align: top;
        }

        .c-list-title {
          font-size: 1.1vw;
          text-align: center;
          color: #0EFCFF;
          padding-top: .3vw;
          width: 100%;
          height: 11%;
        }

        .main-con {
          width: 100%;
          height: 89%;
          margin: auto;
        }
      }
    }
  }


}
</style>